<template>
  <div class="PasswordInput">
    helloworld---修改了---7!
    <van-button @click="gotohandler" type="primary" :loading="loadingbtn" loading-text="跳转中...">主要按钮</van-button>
    <van-button @click="testlocation" type="primary">Aaaa</van-button>
    <!-- 密码输入框 -->
    <van-password-input
      :value="value"
      info="密码为 6 位数字"
      :focused="showKeyboard"
      @focus="showKeyboard = true"
    />
    <!-- 数字键盘 -->
    <van-number-keyboard
      :show="showKeyboard"
      @input="onInput"
      @delete="onDelete"
      @blur="showKeyboard = false"
    />

    <div class="login">
      <div class="loginHeader">
        <input type="tel" class="loginBtn border-bottom" placeholder="请输入手机号" />
        <input type="tel" class="codeBtn" placeholder="请输入验证码" />
        <input
          type="button"
          class="getNumber"
          v-model="codeMsg"
          @click="getCode"
          :disabled="codeDisabled"
        />
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { PasswordInput, NumberKeyboard, Button } from 'vant'
export default {
  name: 'PasswordInput',
  data () {
    return {
      value: '',
      showKeyboard: false,
      loadingbtn: false,

      // 是否禁用按钮
      codeDisabled: false,
      // 倒计时秒数
      countdown: 60,
      // 按钮上的文字
      codeMsg: '获取验证码',
      // 定时器
      timer: null
    }
  },
  methods: {
    onInput (key) {
      this.value = (this.value + key).slice(0, 6)
      this.value.length === 6
        ? (this.showKeyboard = false)
        : (this.showKeyboard = true)
    },
    onDelete () {
      this.value = this.value.slice(0, this.value.length - 1)
    },
    gotohandler () {
      this.loadingbtn = true
      window.clearTimeout(this.time)
      this.time = window.setTimeout(() => {
        this.$router.push({ name: 'Swipe' })
      }, 2000)
    },
    testlocation () {
      this.$router.push({ name: 'Aaaa' })
    },
    // 获取验证码
    getCode () {
      // 验证码60秒倒计时
      if (!this.timer) {
        this.timer = setInterval(() => {
          if (this.countdown > 0 && this.countdown <= 60) {
            this.countdown--
            if (this.countdown !== 0) {
              this.codeMsg = '重新发送(' + this.countdown + ')'
            } else {
              clearInterval(this.timer)
              this.codeMsg = '获取验证码'
              this.countdown = 60
              this.timer = null
              this.codeDisabled = false
            }
          }
        }, 1000)
      }
    }
  },
  components: {
    [PasswordInput.name]: PasswordInput,
    [NumberKeyboard.name]: NumberKeyboard,
    [Button.name]: Button
  }
}
</script>

<style scoped lang="scss">
.login {
  width: 100%;
  height: 100%;
  background: #f9f9f9;
  .loginHeader {
    padding: 0 10px;
    background: #fff;
    margin-top: 20px;
    overflow: hidden;
    .loginBtn {
      width: 100%;
      height: 42px;
      border: none;
      background: #fff;
      color: #444;
      border-radius: 4px;
      outline: none;
      padding-left: 3px;
      font-size: 1.4rem;
      box-sizing: border-box;
      -webkit-appearance: none;
    }
    .border-bottom {
      border-bottom: 1px solid #f3f3f3;
    }
    .codeBtn {
      width: 63%;
      height: 42px;
      border: none;
      background: #fff;
      color: #444;
      border-radius: 4px;
      float: left;
      outline: none;
      padding-left: 3px;
      font-size: 1.4rem;
      box-sizing: border-box;
      -webkit-appearance: none;
    }
    .getNumber {
      width: 35%;
      height: 36px;
      float: right;
      margin-top: 3px;
      border: 1px solid #09bb07;
      color: #09bb07;
      background: #fff;
      border-radius: 4px;
      outline: none;
      -webkit-appearance: none;
    }
  }
}
</style>
